<template>
  <el-dialog
    v-model="visible"
    title="内容分析"
    width="80%"
    class="analysis-dialog"
    @close="handleClose"
  >
    <div class="analysis-content" v-if="workData">
      <!-- 作品基本信息 -->
      <div class="analysis-basic">
        <div class="basic-left">
          <img :src="workData.cover" class="analysis-cover" />
          <div class="cover-info">
            <div class="work-type-badge">
              {{ workData.type === 'video' ? '视频' : '图文' }}
            </div>
            <div class="work-duration" v-if="workData.type === 'video'">
              {{ workData.duration }}
            </div>
          </div>
        </div>
        <div class="basic-right">
          <h3 class="analysis-title">{{ workData.title }}</h3>
          <div class="analysis-author">
            <img :src="workData.authorAvatar" class="analysis-avatar" />
            <div class="author-info">
              <span class="analysis-author-name">{{ workData.authorName }}</span>
              <span class="publish-time">发布时间：{{ workData.publishTime }}</span>
            </div>
          </div>
          <div class="analysis-stats">
            <div class="analysis-stat">
              <el-icon class="stat-icon"><IconEpLike /></el-icon>
              <div class="stat-info">
                <span class="stat-label">点赞数</span>
                <span class="stat-number">{{ formatNumber(workData.likes) }}</span>
              </div>
            </div>
            <div class="analysis-stat">
              <el-icon class="stat-icon"><IconEpChatDotRound /></el-icon>
              <div class="stat-info">
                <span class="stat-label">评论数</span>
                <span class="stat-number">{{ formatNumber(workData.comments) }}</span>
              </div>
            </div>
            <div class="analysis-stat">
              <el-icon class="stat-icon"><IconEpShare /></el-icon>
              <div class="stat-info">
                <span class="stat-label">分享数</span>
                <span class="stat-number">{{ formatNumber(workData.shares) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 数据分析标签页 -->
      <el-tabs v-model="activeTab" class="analysis-tabs">
        <!-- 互动趋势分析 -->
        <el-tab-pane label="互动趋势" name="trend">
          <div class="chart-container">
            <div class="chart-header">
              <h4 class="chart-title">7天互动数据趋势</h4>
              <div class="chart-legend">
                <span class="legend-item">
                  <span class="legend-color" style="background: #409EFF"></span>
                  点赞数
                </span>
                <span class="legend-item">
                  <span class="legend-color" style="background: #67C23A"></span>
                  评论数
                </span>
                <span class="legend-item">
                  <span class="legend-color" style="background: #E6A23C"></span>
                  分享数
                </span>
              </div>
            </div>
            <div class="chart-content" ref="trendChartRef"></div>
          </div>
        </el-tab-pane>
        
        <!-- 用户画像分析 -->
        <el-tab-pane label="用户画像" name="user">
          <div class="user-analysis">
            <div class="user-charts">
              <div class="chart-item">
                <h4 class="chart-title">年龄分布</h4>
                <div class="chart-content" ref="ageChartRef"></div>
              </div>
              <div class="chart-item">
                <h4 class="chart-title">性别分布</h4>
                <div class="chart-content" ref="genderChartRef"></div>
              </div>
            </div>
            <div class="user-stats">
              <div class="stat-card">
                <div class="stat-title">主要用户群体</div>
                <div class="stat-content">
                  <div class="user-group">
                    <span class="group-label">18-24岁女性</span>
                    <span class="group-percent">42%</span>
                  </div>
                  <div class="user-group">
                    <span class="group-label">25-30岁女性</span>
                    <span class="group-percent">28%</span>
                  </div>
                  <div class="user-group">
                    <span class="group-label">18-24岁男性</span>
                    <span class="group-percent">18%</span>
                  </div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-title">地域分布TOP5</div>
                <div class="stat-content">
                  <div class="region-item">
                    <span class="region-name">广东</span>
                    <span class="region-percent">15.2%</span>
                  </div>
                  <div class="region-item">
                    <span class="region-name">北京</span>
                    <span class="region-percent">12.8%</span>
                  </div>
                  <div class="region-item">
                    <span class="region-name">上海</span>
                    <span class="region-percent">11.5%</span>
                  </div>
                  <div class="region-item">
                    <span class="region-name">江苏</span>
                    <span class="region-percent">9.3%</span>
                  </div>
                  <div class="region-item">
                    <span class="region-name">浙江</span>
                    <span class="region-percent">8.7%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 内容分析 -->
        <el-tab-pane label="内容分析" name="content">
          <div class="content-analysis">
            <div class="analysis-section">
              <h4 class="section-title">关键词分析</h4>
              <div class="keywords">
                <el-tag
                  v-for="keyword in keywords"
                  :key="keyword.word"
                  :type="getTagType(keyword.weight)"
                  class="keyword-tag"
                >
                  {{ keyword.word }} ({{ keyword.weight }})
                </el-tag>
              </div>
            </div>
            
            <div class="analysis-section">
              <h4 class="section-title">情感分析</h4>
              <div class="sentiment-analysis">
                <div class="sentiment-item">
                  <span class="sentiment-label">正面情感</span>
                  <el-progress :percentage="72" color="#67C23A" />
                </div>
                <div class="sentiment-item">
                  <span class="sentiment-label">中性情感</span>
                  <el-progress :percentage="20" color="#909399" />
                </div>
                <div class="sentiment-item">
                  <span class="sentiment-label">负面情感</span>
                  <el-progress :percentage="8" color="#F56C6C" />
                </div>
              </div>
            </div>
            
            <div class="analysis-section">
              <h4 class="section-title">热门评论</h4>
              <div class="hot-comments">
                <div
                  v-for="comment in hotComments"
                  :key="comment.id"
                  class="comment-item"
                >
                  <div class="comment-user">
                    <img :src="comment.avatar" class="comment-avatar" />
                    <span class="comment-username">{{ comment.username }}</span>
                  </div>
                  <div class="comment-content">{{ comment.content }}</div>
                  <div class="comment-stats">
                    <span class="comment-likes">
                      <el-icon><IconEpLike /></el-icon>
                      {{ comment.likes }}
                    </span>
                    <span class="comment-time">{{ comment.time }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleExport" :icon="Download">
          导出报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/** @name 内容分析弹窗组件 */

import * as echarts from 'echarts'

import { Download } from "@element-plus/icons-vue"

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  workData: {
    type: Object,
    default: null
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'export'])

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const activeTab = ref('trend')

// 图表引用
const trendChartRef = ref(null)
const ageChartRef = ref(null)
const genderChartRef = ref(null)

// 模拟数据
const keywords = ref([
  { word: '美食', weight: 95 },
  { word: '生活', weight: 88 },
  { word: '分享', weight: 76 },
  { word: '推荐', weight: 65 },
  { word: '好吃', weight: 58 },
  { word: '日常', weight: 45 },
  { word: '探店', weight: 38 },
  { word: '美味', weight: 32 }
])

const hotComments = ref([
  {
    id: 1,
    username: '美食达人小王',
    avatar: 'https://picsum.photos/40/40?random=201',
    content: '看起来真的很好吃，下次一定要去试试！',
    likes: 128,
    time: '2小时前'
  },
  {
    id: 2,
    username: '吃货小李',
    avatar: 'https://picsum.photos/40/40?random=202',
    content: '这家店我去过，确实不错，推荐他们家的招牌菜',
    likes: 95,
    time: '4小时前'
  },
  {
    id: 3,
    username: '美食探索者',
    avatar: 'https://picsum.photos/40/40?random=203',
    content: '价格怎么样？环境如何？',
    likes: 67,
    time: '6小时前'
  }
])

/** @name 格式化数字 */
function formatNumber(num) {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  return num.toString()
}

/** @name 获取标签类型 */
function getTagType(weight) {
  if (weight >= 80) return 'danger'
  if (weight >= 60) return 'warning'
  if (weight >= 40) return 'success'
  return 'info'
}

/** @name 初始化趋势图表 */
function initTrendChart() {
  if (!trendChartRef.value) return
  
  const chart = echarts.init(trendChartRef.value)
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1天前', '2天前', '3天前', '4天前', '5天前', '6天前', '7天前'],
      axisLine: { lineStyle: { color: '#4a5568' } },
      axisLabel: { color: '#a0aec0' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#4a5568' } },
      axisLabel: { color: '#a0aec0' },
      splitLine: { lineStyle: { color: '#2d3748' } }
    },
    series: [
      {
        name: '点赞数',
        type: 'line',
        data: [1200, 1800, 2100, 2800, 3200, 3800, 4200],
        smooth: true,
        lineStyle: { color: '#409EFF' },
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '评论数',
        type: 'line',
        data: [180, 220, 280, 320, 380, 420, 480],
        smooth: true,
        lineStyle: { color: '#67C23A' },
        itemStyle: { color: '#67C23A' }
      },
      {
        name: '分享数',
        type: 'line',
        data: [45, 68, 82, 95, 108, 125, 142],
        smooth: true,
        lineStyle: { color: '#E6A23C' },
        itemStyle: { color: '#E6A23C' }
      }
    ]
  }
  chart.setOption(option)
}

/** @name 初始化年龄分布图表 */
function initAgeChart() {
  if (!ageChartRef.value) return
  
  const chart = echarts.init(ageChartRef.value)
  const option = {
    backgroundColor: 'transparent',
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 35, name: '18-24岁' },
        { value: 28, name: '25-30岁' },
        { value: 20, name: '31-35岁' },
        { value: 12, name: '36-40岁' },
        { value: 5, name: '40岁以上' }
      ],
      label: {
        color: '#a0aec0'
      },
      labelLine: {
        lineStyle: { color: '#4a5568' }
      }
    }]
  }
  chart.setOption(option)
}

/** @name 初始化性别分布图表 */
function initGenderChart() {
  if (!genderChartRef.value) return
  
  const chart = echarts.init(genderChartRef.value)
  const option = {
    backgroundColor: 'transparent',
    series: [{
      type: 'pie',
      radius: '70%',
      data: [
        { value: 62, name: '女性', itemStyle: { color: '#F56C6C' } },
        { value: 38, name: '男性', itemStyle: { color: '#409EFF' } }
      ],
      label: {
        color: '#a0aec0',
        formatter: '{b}: {c}%'
      }
    }]
  }
  chart.setOption(option)
}

/** @name 处理关闭 */
function handleClose() {
  visible.value = false
}

/** @name 处理导出 */
function handleExport() {
  emit('export', props.workData)
  ElMessage.success('报告导出成功')
}

// 监听标签页切换
watch(activeTab, (newTab) => {
  nextTick(() => {
    if (newTab === 'trend') {
      initTrendChart()
    } else if (newTab === 'user') {
      initAgeChart()
      initGenderChart()
    }
  })
})

// 监听弹窗显示
watch(visible, (newVisible) => {
  if (newVisible) {
    nextTick(() => {
      if (activeTab.value === 'trend') {
        initTrendChart()
      }
    })
  }
})
</script>

<style lang="scss" scoped>
.analysis-dialog {
  :deep(.el-dialog) {
    background-color: $qf-color-bg2;
    border: 1px solid $qf-color-border;
  }
  
  :deep(.el-dialog__header) {
    border-bottom: 1px solid $qf-color-border;
    padding: 20px 24px;
    
    .el-dialog__title {
      color: $qf-color-font1;
      font-size: 18px;
      font-weight: 600;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 24px;
  }
}

.analysis-content {
  .analysis-basic {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    padding: 20px;
    background-color: $qf-color-bg1;
    border-radius: $qf-border-radius-base;
    border: 1px solid $qf-color-border;
    
    .basic-left {
      position: relative;
      flex-shrink: 0;
      
      .analysis-cover {
        width: 160px;
        height: 200px;
        object-fit: cover;
        border-radius: $qf-border-radius-base;
      }
      
      .cover-info {
        position: absolute;
        top: 8px;
        right: 8px;
        
        .work-type-badge {
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          margin-bottom: 4px;
        }
        
        .work-duration {
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
        }
      }
    }
    
    .basic-right {
      flex: 1;
      color: #f7f7f7;
      
      .analysis-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        line-height: 1.4;
        color: #f7f7f7;
      }
      
      .analysis-author {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        color: #f7f7f7;
        
        .analysis-avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          object-fit: cover;
          color: #f7f7f7;
        }
        
        .author-info {
          .analysis-author-name {
            display: block;
            color: $qf-color-font1;
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 4px;
            color: #f7f7f7;
          }
          
          .publish-time {
            color: $qf-color-font3;
            font-size: 14px;
          }
        }
      }
      
      .analysis-stats {
        display: flex;
        gap: 32px;
        
        .analysis-stat {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #f7f7f7;
          
          .stat-icon {
            font-size: 20px;
            color: $qf-primary;
          }
          
          .stat-info {
            .stat-label {
              display: block;
              color: $qf-color-font3;
              font-size: 12px;
              margin-bottom: 2px;
            }
            
            .stat-number {
              color: $qf-color-font1;
              font-size: 18px;
              font-weight: 600;
              color: #97a4ff;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  
  .analysis-tabs {
    :deep(.el-tabs__header) {
      border-bottom: 1px solid $qf-color-border;
      margin-bottom: 24px;
    }
    
    :deep(.el-tabs__nav-wrap) {
      &::after {
        background-color: $qf-color-border;
      }
    }
    
    :deep(.el-tabs__item) {
      color: $qf-color-font3;
      font-size: 16px;
      
      &.is-active {
        color: $qf-primary;
      }
    }
    
    :deep(.el-tabs__active-bar) {
      background-color: $qf-primary;
    }
  }
}

.chart-container {
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .chart-title {
      color: $qf-color-font1;
      font-size: 16px;
      font-weight: 600;
      margin: 0;
    }
    
    .chart-legend {
      display: flex;
      gap: 16px;
      
      .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        color: $qf-color-font2;
        font-size: 14px;
        
        .legend-color {
          width: 12px;
          height: 12px;
          border-radius: 2px;
        }
      }
    }
  }
  
  .chart-content {
    height: 300px;
  }
}

.user-analysis {
  .user-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    
    .chart-item {
      background-color: $qf-color-bg1;
      border: 1px solid $qf-color-border;
      border-radius: $qf-border-radius-base;
      padding: 20px;
      
      .chart-title {
        color: $qf-color-font1;
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 16px 0;
        text-align: center;
      }
      
      .chart-content {
        height: 200px;
      }
    }
  }
  
  .user-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    
    .stat-card {
      background-color: $qf-color-bg1;
      border: 1px solid $qf-color-border;
      border-radius: $qf-border-radius-base;
      padding: 20px;
      
      .stat-title {
        color: $qf-color-font1;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      
      .user-group, .region-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid $qf-color-border;
        
        &:last-child {
          border-bottom: none;
        }
        
        .group-label, .region-name {
          color: $qf-color-font2;
          font-size: 14px;
        }
        
        .group-percent, .region-percent {
          color: $qf-primary;
          font-size: 14px;
          font-weight: 600;
        }
      }
    }
  }
}

.content-analysis {
  .analysis-section {
    margin-bottom: 32px;
    
    .section-title {
      color: $qf-color-font1;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .keyword-tag {
        margin: 0;
      }
    }
    
    .sentiment-analysis {
      .sentiment-item {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 12px;
        
        .sentiment-label {
          width: 80px;
          color: $qf-color-font2;
          font-size: 14px;
        }
        
        :deep(.el-progress) {
          flex: 1;
        }
      }
    }
    
    .hot-comments {
      .comment-item {
        background-color: $qf-color-bg1;
        border: 1px solid $qf-color-border;
        border-radius: $qf-border-radius-base;
        padding: 16px;
        margin-bottom: 12px;
        
        .comment-user {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          
          .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
          }
          
          .comment-username {
            color: $qf-color-font1;
            font-size: 14px;
            font-weight: 500;
          }
        }
        
        .comment-content {
          color: $qf-color-font2;
          font-size: 14px;
          line-height: 1.5;
          margin-bottom: 8px;
        }
        
        .comment-stats {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .comment-likes {
            display: flex;
            align-items: center;
            gap: 4px;
            color: $qf-color-font3;
            font-size: 12px;
          }
          
          .comment-time {
            color: $qf-color-font3;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid $qf-color-border;
}
</style>